[CSS] text-shadow, 글자에 그림자 효과

CSS를 사용해 텍스트를 강조하기 위한 방법이 많이 있습니다. 밑줄을 주거나 색을 진하게 하거나... 기타 등등의 방법이 존재합니다. 그 중에서도 효과적인 방법 중 텍스트에 그림자를 주는 방법이 존재합니다. 이는 시각적으로 매우 두드러지는 효과를 줄 수 있습니다.

# 텍스트에 그림자 효과를 주는 방법, text-shadow

CSS에서 그림자 효과를 주기위해서는 text-shadow 속성을 사용합니다. text-shadow는 원하는 색의 그림자를 사용자가 원하는 위치에 만들 수 있도록 도와줍니다.

text-shadow: 좌측 위치, 상단 위치, 그림자크기, 그림자색상;
위는 간단한 사용방법입니다. 설명하면...

• i. 좌측 위치: 왼쪽으로부터 몇 픽셀 떨어져 그림자를 위치시키는지 결정함
• ii. 상단 위치: 상단으로부터 몇 픽셀 떨어져 그림자를 위치시키는지 결정함

그럼 아래 예제를 참고하세요.



# text-shadow 예제보기 아래 예제는 가장 기본적으로 사용되는 방법입니다.
@ text-shadow.html

@ text-shadow.css

위 코드를 실행하면 아래와 같이 결과가 나타나게됩니다.

Webisfree.com

! text-shadow 그림자 크기 및 색을 조절하기

이번 예제는 아래와 같이 그림자의 시작점을 0 0 으로 사용하고 그림자 크기를 5px로 크게 적용하였습니다. 또한 색을 빨강색으로 바꾸어본 예제입니다.

@ text-shadow.html

@text-shadow.css

코드의 실행결과 아래처럼 그림자가 적용됩니다.

Webisfree.com

참고로 그림자가 너무 크면 텍스트가 두드러보이지 않으므로 적절한 그림자 두께를 선택하는 것이 좋습니다. 또한 뒷배경을 함께 사용하는 것도 좋은 방법 중 하나입니다.